<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <title>圈子详情</title>
    <link rel="stylesheet" href="../css/api.css">
    <link rel="stylesheet" href="../css/vant.css">
    <link rel="stylesheet" href="../css/main.css">
    <style>
        .van-field__body textarea {
            width: 3.51rem;
            height: 1.36rem !important;
            /* border: .01rem solid #EBEBEB; */
            border-radius: .05rem;
            /* padding: .1rem .08rem; */
            padding: .1rem 0;
        }
    </style>
</head>

<body>
    <div class="app" v-cloak>
        <!-- 详情 -->
        <header>
            <div class="flex-x-sb f7-header">

                <div class="title">
                    动态详情
                </div>

            </div>
        </header>

        <div class="pt">
            <div class="openapp-link">
                <img src="../image/share/openapp.png" alt="">
            </div>
            <div class="dynamic">
                <div class="dynamic-f1 flex-x-sb">
                    <div class="info flex-x-s">
                        <img src="../image/default/item_img.png" alt="">
                        <div class="name">
                            <div>{{newsDetail.topic.nickName}}</div>
                            <div class="datetime">{{newsDetail.topic.publishTime | handleTimeYMDHmSZH}}</div>
                        </div>
                    </div>

                </div>
                <div class="dynamic-f2">
                    {{newsDetail.topic.content}}
                    <div class="dynamic-f3 flex-x-s flex-wrap">
                        <img :src="item.imagePath" alt="" v-for="(item,index) in newsDetail.topic.medias" :key="index">
                    </div>
                    <div class="dynamic-f5 flex-x-s">

                    </div>
                </div>
                <div style="height: .04rem;background: #f7f7f7;"></div>
                <!-- 评论 -->
                <div class="dynamic-detail-comment">
                    <div class="title">评论</div>
                    <div class="dynamic-detail-item flex-x-s-s" v-for="(comment,index) in newsDetail.topicComments" :key="index">
                        <img :src="comment.headImg?comment.headImg:'../image/circle/man-avatar.png'" alt="">
                        <div class="detail-txt">
                            <div class="name"> {{comment.nickName}}</div>
                            <div class="datetime">{{comment.publishTime}}</div>
                            <div class="content">
                                {{comment.content}}
                            </div>
                            <div class="reply" v-for="item in comment.childTopicComments">
                                <span> {{item.nickName}}</span>回复<span> {{item.toNickName}}</span> {{item.content}}
                            </div>
                        </div>
                    </div>
                </div>




            </div>
            <div class="share-qrcode">
                <div class="qrcode-icon">
                    <img src="../image/share/share-qrcode.png" alt="">
                </div>
                <div class="share-link">铁蟹网</div>
            </div>
        </div>
        <script src="../script/flexible.js"></script>
        <script src="../script/vue.min.js"></script>
        <script src="../script/iconfont.js"></script>
        <script src="../script/vant.min.js"></script>
        <script src="../script/common.js"></script>
        <script>
            var vm = new Vue({
                el: '.app',
                data: {
                    value: '',
                    newsImg: "loading.png",
                    newsDetail: {
                        topic: {},
                        topicComments: []
                    },
                    showShare: false,
                    isShowReportDialog: false,
                    isShowShareDialog: false,
                    shareDialog: false,
                    objOpt: {
                        shareContent: "",
                        reportContent: "",
                        isCollect: false
                    },
                    options: [{
                        name: '微信好友',
                        icon: '../image/circle/wechat.png',
                    }, {
                        name: '微信朋友圈',
                        icon: '../image/circle/Wechat_Moments.png',
                    }],
                },
                filters: {
                    handleTimeYMDHmSZH
                },
                created() {
                    this.newsDetail = {
                        "topic": {
                            "topicId": "1358653506301521921",
                            "userId": "1348523772439789570",
                            "nickName": "张三",
                            "headImg": null,
                            "createTime": 1612763213000,
                            "publishTime": 1612763213000,
                            "attentionFlag": null,
                            "content": "...",
                            "medias": [{
                                imagePath: "../image/default/item_img.png"
                            }, {
                                imagePath: "../image/default/item_img.png"
                            }, {
                                imagePath: "../image/default/item_img.png"
                            }, {
                                imagePath: "../image/default/item_img.png"
                            }, {
                                imagePath: "../image/default/item_img.png"
                            }, {
                                imagePath: "../image/default/item_img.png"
                            }, {
                                imagePath: "../image/default/item_img.png"
                            }, {
                                imagePath: "../image/default/item_img.png"
                            }, {
                                imagePath: "../image/default/item_img.png"
                            }, ],
                            "likeNumber": 0,
                            "likeFlag": null,
                            "commentNumber": 0
                        },
                        "topicComments": [{
                            "topicCommonId": "1358666359557386241",
                            "userId": "1348523772439789570",
                            "nickName": "李雷啦啦啦1i5",
                            "headImg": "http://192.168.1.29:8888/group1/M00/00/07/wKgBHWAg7RuAVYUvAAAFHAIzvLE175_150x150.png",
                            "publishTime": "2021-02-08 14:37:58",
                            "type": 0,
                            "content": "好看",
                            "toUserId": null,
                            "toNickName": null,
                            "childTopicComments": []
                        }, {
                            "topicCommonId": "1358666438171226113",
                            "userId": "1348523772439789570",
                            "nickName": "李雷啦啦啦1i5",
                            "headImg": "http://192.168.1.29:8888/group1/M00/00/07/wKgBHWAg7RuAVYUvAAAFHAIzvLE175_150x150.png",
                            "publishTime": "2021-02-08 14:38:16",
                            "type": 0,
                            "content": "城堡",
                            "toUserId": null,
                            "toNickName": null,
                            "childTopicComments": []
                        }]
                    }
                },
                mounted() {},
                methods: {},
            })
        </script>
</body>

</html>